$(function(){
  const layer = layui.layer

  // 1.获取裁剪区域的 DOM 元素
  const $image = $('#image')

  // 2.配置选项
  const options = {
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 3.创建裁剪区域
  $image.cropper(options)


  // 4.点击上传按钮唤起file点击事件
  $('#btnAdd').on('click',function(){
    $('#files').click()
  })

  // 5.给file添加change事件
  $('#files').on('change',function(e){
    const files = e.target.files
    // console.log(files)
    // 判断是否选择了图片
    if(files.length === 0) return layer.msg('请选择图片')

    // 拿到当前图片
    const file = e.target.files[0]

    // 拿到图片将图片转成URL格式
    const fileURL = URL.createObjectURL(file) 
    // console.log(fileURL)

    // 先销毁之前的，再将新的图片URL格式的重新赋值裁剪区域
    $image
    .cropper('destroy')  // 销毁之前的
    .attr('src',fileURL)  // 重新设置图片的路径
    .cropper(options)   // 初始化裁剪区域
  })

  // 6.给确定按钮绑定点击事件，发起ajax请求
  $('#upload').on('click',function(){
    // 拿到用户裁剪之后的图片
      // 创建新的画布 将画布的内容转成base64格式
    const dataURL = $image
    .cropper('getCroppedCanvas', {
      // 创建一个 Canvas 画布
      width: 100,
      height: 100
    })
    .toDataURL('image/png')

    // 发起请求
    $.ajax({
      method:'POST',
      url:'/my/update/avatar',
      data:{
        avatar:dataURL
      },
      success:function(res) {
        if(res.status !== 0) return layer.msg('头像更改失败')
        layer.msg('头像更改成功')
        // 成功后重新渲染index页面
        window.parent.getUserInfo()
      }
    })
  })
})